<template>
	<view>
		<!-- 搜索框 -->
		<!-- 	<view :class="active.index!==''?'inputss':'inputs'" @tap="searchs">
			<img src="./static/index/搜索.png" alt="" class="imgs">
			<input type="text" :class="active.index!==''?'uni-input':'input'" placeholder="搜索你要找的商品"
				v-model.trim='searchAll' />
			<button class="buttons" @tap="seek" v-if="active.index!==''">搜索</button>
		</view> -->
		<search @tap='dspl' @message='dspls'></search>
		<view v-if="ds===false">
			<!-- 轮播图 -->
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
					@tap="jump">
					<swiper-item v-for="item in Carousel" :key="item.imgName">
						<view class="swiper-item uni-bg-red"><img :src="item.imgUrl" alt="" class="swiper-img">
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 通告栏 -->
			<uni-notice-bar class="noticeBar" background-color='#525252' color='#fff ' show-icon scrollable single
				:text="Notice.text"></uni-notice-bar>
			<!-- 导航组 -->
			<view class="classification">
				<view class="top">
					<view class="topItem" v-for="item in navigation" :key="item.imgName" @tap="jump">
						<img class="img" :src="item.imgUrl" alt="">
						<view class="info">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			<!-- 主会场 -->
			<view class="Main" @tap="jump">
				<img class="img" :src="main[0]?.imgUrl" alt="">
			</view>
			<!-- 猜你喜欢 -->
			<view class="like">
				<!-- 富文本 -->
				<view class="top">
					<span class="info" v-html="RichText.content"></span>
					<!-- <rich-text nodes="{{RichText.content}}"></rich-text> -->
				</view>
				<!-- 商品组 -->
				<view class="commodity">
					<view class="commodityItem" v-for="item in Product" :key="item.goods_id"
						@tap="goDetails(item.goods_id)">
						<img class="img" :src="item.goods_image" alt="">
						<view class="info">
							<view class="name">{{item.goods_name}}</view>
							<view class="Sold">
								已售{{item.goods_sales}}件
							</view>
							<view class="price">
								<span class="current">￥{{item.goods_price_max}}</span>
								<span class="original"
									v-if="item.line_price_max!=='0.00'">￥{{item.line_price_max}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		indexApi
	} from '@/apis/index.js'
	import search from '@/pages/index/components/search.vue'

	// 轮播数据
	const Carousel = ref([])
	// 店铺公告数据
	const Notice = ref([])
	// 导航组
	const navigation = ref([])
	// 主会场
	const main = ref([])
	// 富文本
	const RichText = ref([])
	// 商品组
	const Product = ref([])

	// 获取首页数据
	const getList = async () => {
		const {
			data: {
				pageData
			}
		} = await indexApi()
		// console.log(pageData)
		// 拿轮播数据
		Carousel.value = pageData.items[1].data
		// 拿店铺公告数据
		Notice.value = pageData.items[2].params
		// 拿导航组数据
		navigation.value = pageData.items[3].data
		// 拿主会场数据
		main.value = pageData.items[4].data
		// 拿富文本数据
		RichText.value = pageData.items[5].params
		// 拿商品组数据
		Product.value = pageData.items[6].data
	}
	// console.log(Product)
	getList()

	// 判断首页内容的显示隐藏
	const ds = ref(false)
	const dspl = () => {
		ds.value = true
	}
	// 子传父
	const dspls = (val) => {
		ds.value = val
		// console.log(val);
		// console.log(ds.value);
	}

	// 点击商品跳转详情页
	const goDetails = (id) => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + id
		})
	}

	// 跳分类页
	const jump = () => {
		uni.switchTab({
			url: '/pages/cate/cate'
		})
	}
</script>

<style lang="scss" scoped>
	.active {
		display: none;
	}

	.actives {
		display: block;
	}

	// 猜你喜欢
	.like {
		width: 100%;
		height: 100%;
	}

	.like .top {
		width: 100%;
		height: 60rpx;
		background-color: #fff;
		text-align: center;
		margin-bottom: 5rpx;
	}

	.like .top .info {
		line-height: 45rpx;
		font-size: 30rpx
	}

	.like .commodityItem {
		width: 100%;
		height: 280rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}

	.like .commodityItem .img {
		width: 240rpx;
		height: 240rpx;
		margin-left: 15rpx;
		background-color: #00ff00;
	}

	.like .commodityItem .info {
		flex: 1;
		height: 100%;
		margin-left: 20rpx;
		padding-right: 10rpx;
		// background-color: #00557f;
	}

	.like .commodityItem .info .name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.like .commodityItem .info .Sold {
		font-size: 24rpx;
		color: #b7b7b8;
		margin-top: 20rpx;
	}

	.like .commodityItem .info .price {
		margin-top: 20rpx;
	}

	.like .commodityItem .info .price .current {
		color: #aa5500;
		font-size: 36rpx;
	}

	.like .commodityItem .info .price .original {
		color: #b7b7b8;
		font-size: 28rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}

	// 主会场
	.Main {
		width: 100%;
		height: 300rpx;
		background-color: #aaff00;
	}

	.Main .img {
		width: 100%;
		height: 100%;
	}

	// 商品分类
	.classification {
		width: 100%;
		height: 350rpx;
		background-color: #fff;
		margin-top: -18rpx;
	}

	.classification .top {
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		padding-top: 25rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.classification .topItem {
		width: 130rpx;
		height: 100%;
		margin-bottom: 15rpx;
	}

	.classification .topItem .img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
		margin-left: 15rpx;
	}

	.classification .info {
		margin-top: 10rpx;
		text-align: center;
		font-size: 28rpx
	}

	// 轮播图
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 400rpx;
	}

	.swiper-item {
		display: block;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
	}

	.uni-margin-wrap .swiper-img {
		width: 100%;
		height: 100%;
	}


	// 背景色
	.body {
		background-color: #e7e7e7;
		height: 100%;
	}
</style>